<template>
	 <div class="testContainer">
	 <!-- <div class="header">
	 	<span></span>想要吃的水果
	 </div>
        <ul>
            <li v-for="x in list">
                {{x.name}}
            </li>
        </ul>
      -->
		<div>
    <h1>user List App</h1>

    <table class="table">
      <thead>
        <tr>
          <th>Name</th>         
          <th>Email</th>
          <th>Number</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input class="form-control" v-model="uname"></td>
          <td><input class="form-control" v-model="uemail"></td>
          <td><input class="form-control" v-model="unumber"></td>
          <td><button class="btn btn-primary" @click="addContact()">Add Contact</button></td>
        </tr>
        <tr v-for="contact in user">
          <td>{{contact.name}}</td>
          <td>{{contact.email}}</td>
          <td>{{contact.number}}</td>
        </tr>
      </tbody>
    </table>
  </div>

    </div>
		
</template>

<script>
    export default{
        data(){
            return {
                list:[],
                user:[],
                uname:"",
                uemail:"",
                unumber:""
            }
        },
        mounted:function(){
            this.$http.get('http://localhost:3030/getList.json').then((result)=>{
                if(result.body.code == 0){
                    this.list = result.body.list;
                }
            });

            this.$http.get('http://localhost:3000/contactList').then(result=>{
                console.log(result.body);
                this.user = result.body;         	
            })
        },
        methods:{
        	addContact(){
			this.$http.get('http://localhost:3000/contactList').then(result=>{
				var us = {
					name:this.uname,
					email:this.uemail,
					number:this.unumber
				} 
        		this.user.push(us);
        	})        		
        	}
        }
    }
</script>


<style lang="less" scoped>
@font-face {
    font-family: 'icomoon';
    src:  url('../../../fonts/icomoon.eot?z9byv6');
    src:  url('../../../fonts/icomoon.eot?z9byv6#iefix') format('embedded-opentype'),
      url('../../../fonts/icomoon.ttf?z9byv6') format('truetype'),
      url('../../../fonts/icomoon.woff?z9byv6') format('woff'),
      url('../../../fonts/icomoon.svg?z9byv6#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.testContainer{
	.header{
		font-size: 30px;

		span{
			font-family: "icomoon";
		}
	}

}

</style>